<template>
  <div id="app">
    <!-- <InputBox></InputBox>

    <Index></Index>

    <List></List>

    <Wode></Wode> -->

    <transition name="ly" mode="out-in">
      <!-- 内置缓存组件 -->
      <keep-alive>
        <!-- 动态组件 -->
        <component :is="coms[currentIndex]"></component>
      </keep-alive>
    </transition>
    <div class="tabbar">
      <span
        :class="{ active: currentIndex == index }"
        @click="currentIndex = index"
        v-for="(item, index) in btns"
        :key="index"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script>
import Index from "./components/Index.vue";

import Wode from "./components/Wode.vue";

import InputBox from "./components/InputBox.vue";

import List from "./components/List.vue";

export default {
  name: "App",

  data() {
    return {
      coms: [InputBox, Index, List, Wode],
      btns: ["首页", "爆爆团", "订单", "我的"],
      currentIndex: 0,
    };
  },
};
</script>

<style lang="css">
* {
  margin: 0;
  padding: 0;
}
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  width: 98%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ccc;
  background-color: #fff;
}

.tabbar span.active {
  color: red;
  border-bottom: 2px solid red;
  font-weight: bold;
}
.ly-enter {
  opacity: 0;
}
/* 入场动画执行过程中的状态 */
.ly-enter-active {
  transition: all 0.5s;
}
/* 入场动画执行结束时的状态 */
.ly-enter-to {
  opacity: 1;
}
/* 离场动画初始状态 */
.ly-leave {
  transform: rotate(0deg) scale(1);
}
/* 离场动画执行过程中的状态 */
.ly-leave-active {
  transition: all 0.3s;
}
/* 离场动画执行结束时的状态 */
.ly-leave-to {
  transform: rotate(360deg) scale(0);
}
</style>

